<template>
    <el-menu
		  :default-active="$route.path"
		  background-color="white"
		  style="height: 100vh; position: fixed; overflow-y: auto; width: 200px;"
		  active-text-color="#409eff"
		  class="menu"
		  text-color="black"
		  router
		  @open="handleOpen"
		  @close="handleClose"
		>
		  <div class='title'>
		  	<img src="../assets/images/logo_black.png">
		  	<label>测试平台</label>
		  </div>
		  <template v-for="menu_obj, key in menus">
			  <el-sub-menu :index="key"  v-if="menu_obj.has_permission === true">
					<template #title>
						<el-icon><component :is="menu_obj.icon"></component></el-icon>
						<span>{{ menu_obj.name }}</span>
					</template>
					<template v-for="menu_child_obj in menu_obj.children">
						<el-menu-item v-if='menu_child_obj.has_permission' :index="menu_child_obj.path" @click='addTag(menu_child_obj.path, menu_child_obj.name, menu_child_obj.role_permission_id)'>
							<template #title>
								<el-icon><component :is="menu_child_obj.icon"></component></el-icon>
								<span>{{ menu_child_obj.name }}</span>
							</template>
						</el-menu-item>
					</template>
			  </el-sub-menu>
		  </template>
	</el-menu>
</template>

<script>
import {mapState, mapActions, mapMutations} from 'vuex'
export default {
  data() {
  	return {
		menus: '',
  	}
  },
  computed: {
  	...mapState(['role_id', 'pathPermission'])
  },
  methods: {
	  ...mapMutations(['addTags', 'setPathPermission']),
	  addTag(path, name, role_permission_id){
		  const newPathPermission = {}
		  newPathPermission[path] = role_permission_id
		  this.setPathPermission(Object.assign(this.pathPermission, newPathPermission))
		  this.addTags({path: path, name: name})
	  },
	  async getRole(){
		  const response = await this.$api.getRole(this.role_id)
		  if (response.status === 200){
			  this.menus = {...response.data.result.role_permissions}
		  }
	  }
  },
  created() {
	  this.getRole()
	  const topic_info = window.localStorage.getItem('topic_info')
	  if (topic_info){
	  	this.topicValue = JSON.parse(topic_info).name
	  }
  }
}
</script>

<style scoped>
	.title {
		margin: unset;
		height: 60px;
		color: black;
	}
	.title img{
		position: relative;
		top: 10px;
		left: 23px;
		width: 50px;
		height: 32px;
	}
	.title label {
		position: relative;
		left: 30px;
		top: 12px;
		display: inline-block;
		font-size: 20px;
		font-style: italic;
		vertical-align: 11px;
	}
</style>
